<template>
		<div class="product-detail-wrap">
			<div class="nav-position" :class="{iphoneX: $utils.isIphoneX()}"></div>
			<div class="nav-wrap" :class="{iphoneX: $utils.isIphoneX()}">
				<div class="title"  v-if="$route.params.classify">{{$route.params.classify}}</div>
				<span @click.stop.prevent="handleshowCatalog"  class="iconfont icon-fenlei"></span>
				<div class="comeback-text"  @click.stop.prevent="handleBack">退出</div>
			</div>
			<!-- 全部物件全部照片 -->
			<div class="list-wrap"  :class="{iphoneX: $utils.isIphoneX()}" >
				<div class="prev" @click="handlePrev" v-if="showPrevArrow"><span class="iconfont icon-pasttime"></span></div>
				<div class="next" @click="handleNext" v-if="showNextArrow"><span class="iconfont icon-futuretime"></span></div>
				<div class="indexNum"  v-if="imgurls.length > 0">{{currIndex + 1}}/{{imgurls.length}}</div>
				<div class="all-prod" @click="handleShowProduct" ></div>
				<div class="img-wrap" >
					<img :src="imgSrc" v-show="showImg" :class="showImg ? 'showImg' : 'hideImg'"/>
					<img :src="imgSrc" v-show="!showImg" :class="!showImg ? 'showImg' : 'hideImg'"/>
				</div>
			</div>

			<!-- 物件文本信息 -->
			<div class="info-wrap" :class="{iphoneX: $utils.isIphoneX()}">
					<div class="info-scroll">
						<div class="title" v-if="listItem && imgurls.length > 0">{{listItem.get(imgurls[currIndex]).name}}</div>
						<p class="text-info" v-if="listItem && imgurls.length > 0">{{listItem.get(imgurls[currIndex]).remarks}}</p>
					</div>
			</div>
	
			<!-- 全部展品 -->
			<div v-if="showAllProduct" class="allProduct-wrap">
				<div class="allProduct-cen">
					<div class="header">
						<div class="title">{{$route.params.classify}}<span class="count">共 {{listData.length}} 件</span></div>
						<span class="iconfont icon-publish-cancel" @click="handleShowProduct"></span>
					</div>
					<ul class="allProduct-list">
						<li class="allProduct-list-item" v-for="(item, index) of listData" :key="index" @click="handleClickProduct(item)" v-lazy-container="{ selector: 'img'}">
							<img :data-src="imgProcess(item)" :data-loading="require('./assets/loading.gif')" >
						</li>
					</ul>
				</div>
			</div>
			
			<div v-show="showCatalog" class="catalog-wrap">
				<ul  class="catalog-cen">
					<li class="item-topbg"></li>
					<li v-for="(item, index) of catalogData" :key="index" class="menuImg" @click.stop.prevent="handleClickCatalog(item)" >
						<img :src="item.menuImgUrl" class="menuImg">
					</li>
				</ul>
				<div class="blank" @click.stop.prevent="handlehidden"></div>
			</div>
			<div class="postscript" @click="handlePostClose" v-if="showPostscript">
				<div class="title">{{postscript.title}}</div>
				<div class="para" v-for="(item, index) in postscript.content" :key="'key' + index">{{item}}</div>
				<div class="assistText" v-for="(item, index) in postscript.assistText" :key="index">{{item}}</div>
			</div>
		</div>
	</template>
	
	<script>
		import 'swiper/dist/css/swiper.css'
		import { VueLazyload } from 'vue-lazyload'
		import YLoadMoreRemote from '../../components/load-more-remote';
		import postscript from './postscript.js'
		export default {
			components: {
				YLoadMoreRemote,
				VueLazyload
			},
			data() {
				return {
					showCatalog: false,   // 分类列表显示隐藏开关
					showAllProduct: false,		// 当前分类全部展品显示隐藏开关
					listData: [],					// 当前分类全部展品数据
					catalogData: [],			// 分类数据
					listItem: new Map(),
					imgurls: [],					// 当前分类所有图片数据
					currIndex: 0,					// 当前显示图片index
					showImg: true,
					showPrevArrow: false,				// 上一页显示隐藏开关
					showNextArrow: true,				// 下一页显示隐藏开关
					postscript: postscript,
					showPostscript: false,
				}
			},
	
			computed: {
				imgSrc() {
					this.showImg = this.currIndex % 2;
					return this.imgurls[this.currIndex];
				},
			},
		
			methods: {
				// 处理当前分类数据  
				handleLoaded(list) {
					this.listData = [...list];
					let index = 0;
					this.listItem = new Map();
					for (let item of this.listData) {
						let imgs = item.imgUrl.split('@@');
						for (let imgUrl of imgs) {
							index++;
							this.listItem.set(`${imgUrl},${item.kid}`, item);
						}
					}
					this.getForImgData(); 	// 创建当前分类下所有图片数组
				},
	
				getForImgData() {
					this.imgurls = [...this.listItem.keys()];
					if (this.imgurls.length === 1) {
						this.showNextArrow = false;
						this.getShowPostscript();
					}
				},
	
				// 点击上一页 
				handlePrev() {
					this.currIndex--;
					if (this.currIndex > 0) {
						this.showPrevArrow = true;
						this.showNextArrow = true;
					} else {
						this.showPrevArrow = false;  // 当显示当前图片为第一张图时 不显示Prev按钮
						this.showNextArrow = true;
					}
				},
	
				handleNext() {
					this.currIndex++
					if (this.currIndex !== this.imgurls.length - 1) {
						this.showPrevArrow = true;
					} else {
						this.showNextArrow = false; 		// 当显示当前图片为最后一张图时 不显示Next按钮
						this.showPrevArrow = true;
						this.getShowPostscript();
					}
				},
	
				imgProcess(item) {
					let index = item.imgUrl.split('@@')[0].indexOf('/watermark');
					return `${item.imgUrl.split('@@')[0].slice(0, index)}/resize,m_lfit,h_0,w_100`
				},
	
				// 点击全部展品跳转到相应图片
				handleClickProduct(item) {
					let clickImg = `${item.imgUrl.split('@@')[0]},${item.kid}`;
					this.currIndex = this.imgurls.indexOf(clickImg);
					this.showAllProduct = !this.showAllProduct;
					if (this.currIndex > 0) {
						this.showPrevArrow = true; 
						this.showNextArrow = true; 
						if (this.currIndex === this.imgurls.length - 1) { // 最后一张图片隐藏右箭头
							this.showNextArrow = false; 
							this.getShowPostscript();
						}
					} else {
						this.showPrevArrow = false;
						this.showNextArrow = true;  // currIndex为0时 显示右箭头
						if (this.currIndex === this.imgurls.length - 1) {  // currIndex为0 且只有一张图示 不显示右箭头
							this.showNextArrow = false;
							this.getShowPostscript(); 
						}
					}
				},
				
				
				handleshowCatalog() {		// 点击显示隐藏分类
					this.showCatalog = true;
				},
				
				handleShowProduct() {			// 全部展品显示隐藏
					this.showAllProduct = !this.showAllProduct;
				},
	
				handlehidden() {		// 点击蒙层隐藏分类列表
					this.showCatalog = false;
				},
				
				handleClickCatalog(item) {		// 点击分类刷新页面数据
					this.$router.replace(`/product-detail/${item.kid}/${item.name}`);
					this.showCatalog = false;
					this.currIndex = 0;
					this.showPrevArrow = false;
					this.showNextArrow = true;
					this.getClassifyList();
				},
	
				handleBack() {
					this.$router.replace('/museum');
				},

				handlePostClose() {
					this.showPostscript = false;
				},
	
				async getClassifyList() {
					let config = {url: `/lovelorn/v1.3/pt/museum-things/action/classifyList`,	
						params: {classifyKid: this.$route.params.kid, pageNo: 1,  pageSize: 500}
					}
					let listRes  = await this.$http(config)
					let list = listRes.data.data.entities;
					this.handleLoaded(list);
				},
				
				async getCatalogRes() {
					let catalogRes = await this.$http.get(`/lovelorn/v1.3/pb/museum-classifys/action/list`, {params: { pageSize: 20 }});
					this.catalogData = catalogRes.data.data.entities;
				},

				async getShowPostscript() {
					let res = await this.$http.get(`/lovelorn/v1.3/pt/museum-things/action/isEpilogue`);
					this.showPostscript  = res.data.data;
				}
			},
			created() {
				this.getClassifyList();
				this.getCatalogRes();
			},
		}
	
	</script>
	<style>
		.product-detail-wrap {
			height: 100vh;
			& .nav-position {
				height: 1.2rem;
				&.iphoneX {
					height: 1.76rem;
				}
			}
			& .nav-wrap {
				height: 1.2rem;
				background: #fff;
				color: #bc9f72;
				font-size: 0.42rem;
				/* position: relative; */
				padding-top: 0.4rem;
				z-index: 5;
				position: fixed;
				width: 100%;
				top: 0;
				&.iphoneX {
					height: 1.76rem;
					padding-top: 0.88rem;
					& .comeback-text, & .title, & .icon-fenlei {
						top: 0.88rem;
						height: 0.88rem;
						line-height: 0.88rem;
					}
				}
				& .comeback-text {
					/* position: absolute; */
					right: 0;
					top: 0.4rem;
					height: 0.8rem;
					line-height: 0.8rem;
					font-size: 0.32rem;
					margin-left: 0.2rem;
					color: #65461e;
					padding-left: 0.2rem;
					padding-right: 0.3rem;
					z-index: 5;
					position: fixed;
				}
	
				& .title {
					/* position: absolute; */
					width: 100%;
					height: 0.8rem;
					text-align: center;
					line-height: 0.8rem;
					font-size: 0.32rem;
					color: #65461e;
					z-index: 5;
					position: fixed;
					top: 0.4rem;
				}
	
				& .icon-fenlei {
					position: absolute;
					left: 0;
					top: 0.4rem;
					z-index: 5;
					line-height: 0.8rem;
					padding: 0 0.3rem;
					height: 0.8rem;
					position: fixed;
				}
			}
	
			& .list-wrap {
				width: 100%;
				height: calc(100% - 1.28rem - 2.16rem);
				background: url('./assets/swiper-bg.png') no-repeat center;
				background-size: cover;
				position: relative;
				&.iphoneX {
					height: calc(100% - 1.76rem - 2.66rem);
					& .indexNum {
						bottom: 1.4rem;
					}
					& .all-prod {
						bottom: 1.2rem;
					}
				}
	
				& .prev, & .next {
					position: absolute;
					top: 0;
					height: 100%;
					z-index: 2;
					width: 1.35rem;
					display: flex;
					justify-content: center;
					align-items: center;
					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

					& .iconfont {
						width: 0.72rem;
						height: 0.72rem;
						background: rgba(0, 0, 0, 0.4);
						border-radius: 0.36rem;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 0.42rem;
					}
				}
	
				& .prev {
					left: 0;
				}
	
				& .next {
					right: 0;
				}
	
				& .indexNum {
					position: absolute;
					left: 50%;
					bottom: 0.6rem;
					margin-left: -0.55rem;
					width: 1.1rem;
					height: 0.3rem;
					border-radius: 0.15rem;
					background: rgba(0,0,0,0.4);
					color: #fff;
					z-index: 2;
					font-size: 0.22rem;
					text-align: center;
				}
				& .all-prod {
					width: 1.14rem;
					height: 1.14rem;
					background: url('./assets/all-prod.png') no-repeat center;
					background-size: cover;
					position: absolute;
					z-index: 2;
					bottom: 0.26rem;
					right: 0.2rem;
				}
			}
	
			& .img-wrap {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: left 0.5s;
				& img {
					opacity: 1;
					display: block;
					transition: display 0.5s;
					max-width: 100%;
					object-fit: fill;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					&.showImg {
						display: block;
					}
	
					&.hideImg {
						display: none;
					}
				}
			}
	
			& .info-wrap {
				position: absolute;
				z-index: 2;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 2.16rem;
				background: url('./assets/page-bg.png') repeat left top;
				background-size: cover;
				color: #65461e;
				padding: 0.2rem 0.3rem;
				box-shadow: 0 0 0.3rem 0.02rem #a2a19c;
				&.iphoneX {
					height: 2.66rem;
				}

				& .info-scroll {
					overflow: scroll;
				}
	
				& .title {
					font-size: 0.32rem;
					font-weight: 700;
				}
	
				& .text-info {
					font-size: 0.28rem;
					text-align: justify;
					line-height: 0.4rem;
					height: 1.2rem;
				}
			}
			& .allProduct-wrap {
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				/* 全部物件 zindex 4 */
				z-index: 4;
	
				& .allProduct-cen {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 70%;
					width: 100%;
					background: url('./assets/page-bg.png') repeat left top;
					background-size: cover;
	
					& .header {
						width: 100%;
						padding-left: 0.5rem; 
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 0.3rem;
	
						& .title {
							padding-top: 0.4rem;
							font-size: 0.42rem;
							color: #715636;
							& span {
								font-size: 0.28rem;
								color: #bc9f72;
								margin-left: 0.1rem;
							}
						}
						& .icon-publish-cancel {
							padding: 0.26rem 0.3rem;
							font-size: 0.22rem;
							color: #715636;
						}
					}
	
					& .allProduct-list {
						margin: 0 0.5rem;
						height: 80%;
						overflow: scroll;
						-webkit-overflow-scrolling:touch;
	
						& .allProduct-list-item {
							width: 31%;
							height: 1.5rem;
							overflow: hidden;
							background: #aaa;
							margin-bottom: 0.1rem;
							margin-right: 3%;
							display: inline-flex;
							background: #fff;
	
							&:nth-child(3n) {
								margin-right: 0;
							}
	
							& img {
								margin: 0 auto;
							}
						}
					}
				}
			}
	
			& .catalog-wrap {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 6;
				background: rgba(0,0,0,0.5);
				display: flex;
				flex-direction: row;
	
				& .blank {
					width: calc(100% - 5.5rem);
					height: 100%;
				}
	
				& .catalog-cen {
					width: 5.5rem;
					height: 100%;
					overflow: scroll;
					padding: 1.2rem 0.3rem 0.5rem;
					background: url('./assets/page-bg.png') repeat left top;
					background-size: cover;
					-webkit-overflow-scrolling:touch;
	
					& .item-topbg {
						width: 5.5rem;
						height: 1.48rem;
						background: url('./assets/topbg.png') repeat center top;
						background-size: cover;
						position: fixed;
						top: 0;
						left: 0;
					}
	
					& .menuImg {
						width: 4.5rem;
						height: 1.4rem;
						overflow: hidden;
						cursor: pointer;
						margin-bottom: 0.2rem;
						
	
						& img {
							width: 4.5rem;
						height: 1.4rem;
						overflow: hidden;
						}
					}

				}
			}

			& .postscript {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				height: 100vh;
				width: 100%;
				background: rgba(0,0,0,0.7);
				padding: 1.8rem 0.6rem 1.2rem;
				color: #fff;
				z-index: 3;
				& .title {
					font-size: 0.46rem;
					font-weight: 700;
					text-align: center;
				}

				& .para {
					font-size: 0.3rem;
					line-height: 0.4rem;
					text-align: justify;
					text-indent: 0.6rem;
					& + .para {
						margin-top: 0.16rem;
					}
				}
				& .assistText {
					font-size: 0.24rem;
					line-height: 0.3rem;
					text-align: right;
				}
			}
		}
	
	</style>
	